<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="wrapper">
        <div class="panel layui-panel">
            <div class="layui-tab layui-tab-brief" lay-filter="tab">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="tabList">链接管理</li>
                    <li id="tabForm" lay-id="tabForm" style="display: none;">新增</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" lay-filter="formSearch">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <select name="class_id">
                                        <option value="">链接分类</option>
                                        <option value="0">无分类</option>
                                        {foreach link_class as $k => $v}
                                        <option value="{$k}">{$v}</option>
                                        {/foreach}
                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <input type="text" name="name" class="layui-input" placeholder="名称">
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" lay-filter="search" lay-submit>搜索</button>
                                </div>
                            </div>
                        </form>

                        <table class="layui-hide" id="table" lay-filter="table"></table>
                
                        <script type="text/html" id="TB">
                            <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> 新增</a>
                            <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="class"><i class="layui-icon layui-icon-slider"></i> 链接分类</a>
                        </script> 

                        <script type="text/html" id="Switch">
                            <input type="checkbox" name="switch" value="{{= d.id }}" title="是|否" lay-skin="switch" lay-filter="switch" {{= d.switch > 0 ? "checked" : "" }}>
                        </script>

                        <script type="text/html" id="OPE">
                            <a lay-event="edit">编辑</a>
                            <span class="ope-delimiter">|</span>
                            <a lay-event="del">删除</a>
                        </script>
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form scms-form" id="form" lay-filter="form">  
                            <input type="input" name="id" value="0" style="display: none;">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">链接分类：</label>
                                <div class="layui-input-block">
                                    <select name="class_id">
                                        <option value="0">无分类</option>
                                        {foreach link_class as $k => $v}
                                        <option value="{$k}">{$v}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">名称：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" lay-verify="required" placeholder="请输入链接名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">地址：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="url" placeholder="请输入链接地址" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">图片：</label>
                                <div class="layui-input-block">
                                    <div class="layui-input-group" style="width: 100%;">
                                        <div class="layui-input-prefix" style="padding: 0; width: 180px;">
                                            <div class="layui-btn-group">
                                                <button type="button" class="layui-btn layui-btn-primary" id="pic_upload"><i class="layui-icon layui-icon-upload-drag"></i> 上传</button>
                                                <button type="button" class="layui-btn layui-btn-primary" id="pic_preview"><i class="layui-icon layui-icon-eye"></i> 预览</button>
                                            </div>
                                        </div>
                                        <input type="text" name="pic" value="" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">排序：</label>
                                <div class="layui-input-block">
                                    <input type="number" name="sort" value="0" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">开关：</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="switch" value="1" title="开启" checked>
                                    <input type="radio" name="switch" value="0" title="关闭">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" id="save" lay-filter="save" lay-submit>保存</button>
                                    <a class="layui-btn layui-btn-primary" onclick="layui.element.tabChange('tab', 'tabList')">取消</i></a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(function() {
    var $ = layui.jquery,
        element = layui.element,
        form = layui.form,
        table = layui.table,
        upload = layui.upload;

        
    element.on('tab(tab)', function(obj) {
        document.getElementById('form').reset();
        $('#tabForm').html('<i class="layui-icon layui-icon-add-1"></i> 新增');
        $('#tabForm').css('display', obj.index ? 'inline-block' : 'none');
    });

    form.on('submit(search)', function(obj) {
        table.reloadData('table', { where: obj.field, page: { curr: 1 } });
        return false;
    });

    table.render({
        id: 'table',
        elem: '#table',
        url: "{:url('admin/link/link')}",
        method: 'post',
        toolbar: '#TB',
        defaultToolbar: ['filter', 'exports', 'print'],
        page: true,
        cols: [[
            // {type:'checkbox', fixed: 'left'},
            {field: 'sort', title: '排序', width: 60, edit: 'text', align: 'center'},
            {field: 'id', title: 'ID', width: 80, align: 'center'},
            {field: 'name', title: '名称'},
            {field: 'class_id', title: '分类ID', width: 80, align: 'center'},
            {field: 'class_name', title: '分类名称', width: 160},
            {title: '开关', width: 100, templet: '#Switch', align: 'center'},
            {title: '操作', width: 100, fixed: 'right', templet: '#OPE', align: 'center'}
        ]],
        height: 'full-191',
        skin: 'line',
        // done: function (res, curr, count, origin) {
        //     table.resize('table');
        // }
    });

    table.on('toolbar(table)', function(obj) {
        if (obj.event === 'add') {
            element.tabChange('tab', 'tabForm');
        } else if (obj.event === 'class') {
            layer.open({
                type: 2,
                title: '链接分类',
                content: "{:url('admin/link/linkclass')}",
                area: ['50%', '100%'],
                offset: 'r',
                anim: 'slideLeft',
                shadeClose: true,
                end: function() {
                    location.reload();
                }
            });
        }
    });

    table.on('tool(table)', function (obj) {
        if (obj.event === 'edit') {
            element.tabChange('tab', 'tabForm');
            $('#tabForm').html('<i class="layui-icon layui-icon-edit"></i> 编辑');

            form.val('form', {
                'id': obj.data.id,
                'class_id': obj.data.class_id,
                'name': obj.data.name,
                'url': obj.data.url,
                'pic': obj.data.pic,
                'sort': obj.data.sort,
                'switch': obj.data.switch,
            });
        } else if (obj.event === 'del') {
            layer.confirm('确定要删除此链接吗？', {icon: 3}, function (index) {
                var loadIndex = layer.load();
                $.post("{:url('admin/link/linkdel')}", {'id': obj.data.id}, function(res) {
                    layer.close(loadIndex);
                    if (res.code > 0) {
                        layer.alert(res.msg, {icon: 2});
                    } else {
                        layer.msg(res.msg, {time: 500});
                        table.reloadData('table');
                    }
                });
                layer.close(index);
            });
        }
    });

    table.on('edit(table)', function(obj) {
        var loadIndex = layer.load();
        $.post("{:url('admin/link/linksort')}", {'id': obj.data.id, 'sort': obj.value}, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                table.reloadData('table');
            }
        });
    });

    form.on('switch(switch)', function(obj){
        var loadIndex = layer.load();
        $.post("{:url('admin/link/linkswitch')}", {'id': this.value, 'menu': obj.elem.checked ? 1 : 0}, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                table.reloadData('table');
            }
        });
    });

    form.on('submit(save)', function(obj) {
        var postData = obj.field;
        var loadIndex = layer.load();
        $.post("{:url('admin/link/linksave')}", postData, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                element.tabChange('tab', 'tabList');
                table.reloadData('table');
            }
        });
        return false;
    });

    upload.render({
        elem: '#pic_upload',
        url: "{:url('admin/index/upload')}",
        accept: 'images',
        acceptMime: 'image/*',
        done: function(res) {
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                $('input[name="pic"]').val(res.data.src);
            }
        }
    });

    $('#pic_preview').click(function() {
        layer.photos({ photos: { 'data': [{ 'src': $('input[name="pic"]').val() }]} });
    });    
});
</script>